<template>
    <div id='system-user'>
        <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="管理员管理" name="first">
            <div class="btn">
                <el-button type="primary" @click="resetAdmin">新增管理员</el-button>
            </div>
            <div class="adminplist">
                <loading v-if="adminIsShow" style="position:absolute;top:200px;"></loading>
                <!-- @row-click="goAuthDetail" -->
             <el-table
             v-else="!adminIsShow"
              :data="tableData"
              stripe
              header-row-class-name="back"
              style="width: 100%">
              <el-table-column
                prop="accName"
                align="center"
                label="账号">
              </el-table-column>
              <el-table-column
                prop="name"
                align="center"
                label="姓名">
              </el-table-column>
              <el-table-column
                prop="role"
                align="center"
                label="角色">
              </el-table-column>
              <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button
                      @click.native.prevent="deleteRow(scope.row, tableData)"
                      type="text"
                      size="small">
                      删除
                    </el-button>
                    <span class="red">/</span>
                    <el-button type="text" size="small"   @click="modifyFn(scope.row)">修改</el-button>
                </template>
              </el-table-column>
            </el-table>
            </div>
            <el-pagination
                class="paga"
                @current-change="handleCurrentChange"
                :page-size="10"
                :pager-count="5"
                layout=" prev, pager, next, jumper"
                :total="adminTotal"
                :background="true">
            </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="角色管理" name="second">
            <div class="btn">
                <el-button type="primary" @click="arfn">新增角色</el-button>
            </div>
            <loading v-if="isRoleList"></loading>
             <div class="role-list" v-else="!isRoleList">
                <el-table
              :data="tableData1"
              stripe
              header-row-class-name="back"
              style="width: 100%">
              <el-table-column
                prop="roleName"
                align="center"
                label="角色名">
              </el-table-column>
              <el-table-column
                prop="remarks"
                align="center"
                label="备注">
              </el-table-column>
            <!--   <el-table-column
              prop="role"
              align="roles"
              label="角色">
            </el-table-column> -->
              <el-table-column
                label="操作"
                align="center">
                <template slot-scope="scope">
                    <el-button
                      @click.native.prevent="deleteRow1(scope.row, tableData1)"
                      type="text"
                      size="small">
                      删除
                    </el-button>
                    <span class="red">/</span>
                    <el-button type="text" size="small"   @click="modifyFn1(scope.row)">修改</el-button>
                </template>
              </el-table-column>
            </el-table>
             </div>
             <!--  :total="rolesListPages"-->
            <el-pagination
                class="paga"
                @current-change="handleCurrentChange1"
                :page-size="10"
                :pager-count="5" 
                :page-count="rolesListindex"
                layout=" prev, pager, next, jumper"
                :total="rolesListPages"
                :background="true">
            </el-pagination>
        </el-tab-pane>
      </el-tabs>

       <!-- 新增管理员 -->
       <modal-editfz 
            title='新增管理员'
            :show='show_modal_user1' 
            :loading='loading_save1' 
            @close='show_modal_user1=false'
            @confirm='saveUser1'>
            <div class="modal-add-account__main" >
                <ul class="modal_nav">
                    <li>
                        <span class="form-item__key2">账号:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入账号"
                            v-model="addAccounts"
                            clearable>
                        </el-input>
                    </li>
                    <li>
                        <span class="form-item__key2">姓名:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入姓名"
                            v-model="addName"
                            clearable>
                        </el-input>
                    </li>
                    <li>
                        <span class="form-item__key2">密码:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入密码"
                            type="password"
                            v-model="addpsw"
                            clearable>
                        </el-input>
                    </li>
                    <li class="list2">
                        <span class="form-item__key2">角色:</span>
                        <!-- <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入角色"
                            v-model="addRole"
                            clearable>
                        </el-input> -->
                        <el-select v-model="value5" multiple placeholder="请选择角色">
                          <el-option
                            v-for="item in allRolesArr"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.id">
                          </el-option>
                        </el-select>
                    </li>
                </ul>
                
            </div>
        </modal-editfz>  

        <!-- 修改管理员 -->
       <modal-editfz 
            title='修改管理员'
            :show='show_modal_user2' 
            :loading='loading_save2' 
            @close='show_modal_user2=false'
            @confirm='saveUser2'>
            <div class="modal-add-account__main" >
                <ul class="modal_nav">
                    <li> 
                        <span class="form-item__key2">账号:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入账号"
                            v-model="modifyAccounts"
                            clearable>
                        </el-input>
                    </li>
                    <li>
                        <span class="form-item__key2">姓名:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入姓名"
                            v-model="modifyName"
                            clearable>
                        </el-input>
                    </li>
                    <li>
                        <span class="form-item__key2">密码:</span>
                        <el-input
                            class="inpw form-item_inp"
                            placeholder="请输入密码"
                            type="password"
                            v-model="modifypsw"
                            clearable>
                        </el-input>
                    </li>
                    <li class="list2">
                        <span class="form-item__key2">角色:</span>
                        <el-select v-model="value5" multiple placeholder="请选择角色">
                          <el-option
                            v-for="item in allRolesArr"
                            :key="item.id"
                            :label="item.roleName"
                            :value="item.id">
                          </el-option>
                        </el-select>
                    </li>
                </ul>
                
            </div>
        </modal-editfz>  
       
        <!-- 新增角色 show_modal_user3-->
        <modal-editfzs 
              title='新增角色'
              :show='show_modal_user3' 
              :loading='loading_save3' 
              @close='show_modal_user3=false'
              @confirm='addRolesFn'>
              <div class="modal-add-account__main modal-add-account__main1" >
                  <ul class="modal_nav">
                      <li>
                          <span class="form-item__key2">角色名:</span>
                          <el-input
                              class="inpw form-item_inp"
                              placeholder="请输入账号"
                              v-model="addRolesName"
                              clearable>
                          </el-input>
                      </li>
                      <li class="list">
                          <span class="form-item__key2">备注:</span>
                          <textarea class='modal__textarea txta' rows="4" placeholder="请输入新增角色备注" v-model='rejectReason'></textarea>
                      </li>
                       <li class="list1">
                                  <el-button type="text" @click="isClick" slot="reference">一级/二级菜单  <i :class="iconfont"></i></el-button>
                              <div class="sjk">   
                                  <div class="poprols" :id="value0.length>0?opts0.parentId :''">
                                <el-select v-model="value0" multiple    :placeholder="opts0.parentMenuName" popper-class="seleopt">

                                 <el-option
                                   v-for="subitem in optArr0"
                                   :key="subitem.id"
                                   :label="subitem.info"
                                   :value="subitem.id">
                                    <span style="float: left;font-size: 15px;">{{ subitem.info }}</span>
                                    <span style="float: right;font-size: 15px;">{{ opts0.parentMenuName }}</span>
                                 </el-option>
                              </el-select>
                                 </div>
                                 <div class="poprols" :id="value1.length>0?opts1.parentId :''">
                                <el-select v-model="value1" multiple :placeholder="opts1.parentMenuName" popper-class="seleopt">
                                <el-option
                                  v-for="subitem in optArr1"
                                  :key="subitem.id"
                                  :label="subitem.info"
                                  :value="subitem.id">
                                   <span style="float: left;font-size: 15px;">{{ subitem.info }}</span>
                                   <span style="float: right;font-size: 15px;">{{ opts1.parentMenuName }}</span>
                                </el-option>
                              </el-select>
                                   </div>
                                   <div class="poprols" :id="value2.length>0?opts2.parentId :''">
                                <el-select v-model="value2" multiple  :placeholder="opts2.parentMenuName" popper-class="seleopt">
                                <el-option
                                  v-for="subitem in optArr2"
                                  :key="subitem.id"
                                  :label="subitem.info"
                                  :value="subitem.id">
                                   <span style="float: left;font-size: 15px;">{{ subitem.info }}</span>
                                   <span style="float: right;font-size: 15px;">{{ opts2.parentMenuName }}</span>
                                </el-option>
                              </el-select>
                                   </div> 
                                   <div class="poprols" :id="value3.length>0?opts3.parentId :''">
                                <el-select v-model="value3" multiple  :placeholder="opts3.parentMenuName" popper-class="seleopt">
                                <el-option
                                  v-for="subitem in optArr3"
                                  :key="subitem.id"
                                  :label="subitem.info"
                                  :value="subitem.id">
                                   <span style="float: left;font-size: 15px;">{{ subitem.info }}</span>
                                   <span style="float: right;font-size: 15px;">{{ opts3.parentMenuName }}</span>
                                </el-option>
                              </el-select>
                                   </div>
                                   <div class="poprols" :id="value4.length>0?opts4.parentId :''">
                                <el-select v-model="value4" multiple  :placeholder="opts4.parentMenuName" popper-class="seleopt">
                                <el-option
                                  v-for="subitem in optArr4"
                                  :key="subitem.id"
                                  :label="subitem.info"
                                  :value="subitem.id">
                                   <span style="float: left;font-size: 15px;">{{ subitem.info }}</span>
                                   <span style="float: right;font-size: 15px;">{{ opts4.parentMenuName }}</span>
                                </el-option>
                              </el-select>
                                 </div>
                              <div class="poprols" :id="value5.length>0?opts5.parentId :''">
                                <el-select v-model="value5" multiple  :placeholder="opts5.parentMenuName" popper-class="seleopt">
                                <el-option
                                  v-for="subitem in optArr5"
                                  :key="subitem.id"
                                  :label="subitem.info"
                                  :value="subitem.id">
                                   <span style="float: left;font-size: 15px;">{{ subitem.info }}</span>
                                   <span style="float: right;font-size: 15px;">{{ opts5.parentMenuName }}</span>
                                </el-option>
                              </el-select>
                                 </div>
                                 <div class="poprols" :id="value6.length>0?opts6.parentId :''">
                                <el-select v-model="value6" multiple  :placeholder="opts6.parentMenuName" popper-class="seleopt">
                                <el-option
                                  v-for="subitem in optArr6"
                                  :key="subitem.id"
                                  :label="subitem.info"
                                  :value="subitem.id">
                                   <span style="float: left;font-size: 15px;">{{ subitem.info }}</span>
                                   <span style="float: right;font-size: 15px;">{{ opts6.parentMenuName }}</span>
                                </el-option>
                              </el-select>
                                 </div>
                                <div class="poprols" :id="value7.length>0?opts7.parentId :''">
                                  <el-select v-model="value7" multiple :placeholder="opts7.parentMenuName" popper-class="seleopt">
                                <el-option
                                  v-for="subitem in optArr7"
                                  :key="subitem.id"
                                  :label="subitem.info"
                                  :value="subitem.id">
                                  <span style="float: left;font-size: 16px;">{{ subitem.info }}</span>
                                  <span style="float: right; font-size: 16px;">{{ opts7.parentMenuName }}</span>
                                </el-option>
                                </el-select>
                               </div>  
                             <div class="poprols" :id="value8.length>0?opts8.parentId :''">
                                <el-select v-model="value8" multiple :placeholder="opts8.parentMenuName" popper-class="seleopt">
                                  <el-option
                                    v-for="subitem in optArr8"
                                    :key="subitem.id"
                                    :label="subitem.info"
                                    :value="subitem.id">
                                    <span style="float: left;font-size: 16px;">{{ subitem.info }}</span>
                                    <span style="float: right; font-size: 16px;">{{ opts8.parentMenuName }}</span>
                                  </el-option>
                                </el-select>
                                 </div>
                                 <div class="poprols" :id="value9.length>0?opts9.parentId :''">
                                <el-select v-model="value9" multiple :placeholder="opts9.parentMenuName" popper-class="seleopt">
                                  <el-option
                                    v-for="subitem in optArr9"
                                    :key="subitem.id"
                                    :label="subitem.info"
                                    :value="subitem.id">
                                    <span style="float: left;font-size: 16px;">{{ subitem.info }}</span>
                                    <span style="float: right; font-size: 16px;">{{ opts9.parentMenuName }}</span>
                                  </el-option>
                                </el-select>
                                 </div>
                                 <div class="poprols" v-show="value10.length" :id="value10.length>0?opts10.parentId :''">
                                    <el-select v-model="value10" multiple :placeholder="opts10.parentMenuName" popper-class="seleopt">
                                      <el-option
                                        v-for="subitem in optArr10"
                                        :key="subitem.id"
                                        :label="subitem.info"
                                        :value="subitem.id">
                                        <span style="float: left;font-size: 16px;">{{ subitem.info }}</span>
                                        <span style="float: right; font-size: 16px;">{{ opts10.parentMenuName }}</span>
                                      </el-option>
                                    </el-select>
                                 </div>
                              </div>
          
                      </li> 
                  </ul>
                  
              </div>
          </modal-editfzs>   

        <!-- 修改角色 show_modal_user4-->
        <modal-editfzs 
           title='修改角色'
           :show='show_modal_user4' 
           :loading='loading_save4' 
           @close='show_modal_user4=false'
           @confirm='addRolesFn1'>
           <div class="modal-add-account__main modal-add-account__main1" >
               <ul class="modal_nav">
                   <li>
                       <span class="form-item__key2">角色名:</span>
                       <el-input
                           class="inpw form-item_inp"
                           placeholder="请输入账号"
                           v-model="modifyRolesName"
                           clearable>
                       </el-input>
                   </li>
                   <li class="list">
                       <span class="form-item__key2">备注:</span>
                       <textarea class='modal__textarea txta' rows="4" placeholder="请输入新增角色备注" v-model='rejectReason1'></textarea>
                   </li>
                   <li class="list1">
                     
                         <el-button type="text" @click="isClick" slot="reference">一级/二级菜单  <i :class="iconfont"></i></el-button>
                           <div class="sjk">   
                             
       
                               <div class="poprols" :id="value0.length>0?opts0.parentId :''">
                             <el-select v-model="value0" multiple    :placeholder="opts0.parentMenuName" popper-class="seleopt">
                            <el-option
                              v-for="subitem in optArr0"
                              :key="subitem.id"
                              :label="subitem.info"
                              :value="subitem.id">
                               <span style="float: left;font-size: 15px;">{{ subitem.info }}</span>
                               <span style="float: right;font-size: 15px;">{{ opts0.parentMenuName }}</span>
                            </el-option>
                           </el-select>
                              </div>
                              <div class="poprols" :id="value1.length>0?opts1.parentId :''">
                             <el-select v-model="value1" multiple :placeholder="opts1.parentMenuName" popper-class="seleopt">
                             <el-option
                               v-for="subitem in optArr1"
                               :key="subitem.id"
                               :label="subitem.info"
                               :value="subitem.id">
                                <span style="float: left;font-size: 15px;">{{ subitem.info }}</span>
                                <span style="float: right;font-size: 15px;">{{ opts1.parentMenuName }}</span>
                             </el-option>
                           </el-select>
                                </div>
                                <div class="poprols" :id="value2.length>0?opts2.parentId :''">
                             <el-select v-model="value2" multiple  :placeholder="opts2.parentMenuName" popper-class="seleopt">
                             <el-option
                               v-for="subitem in optArr2"
                               :key="subitem.id"
                               :label="subitem.info"
                               :value="subitem.id">
                                <span style="float: left;font-size: 15px;">{{ subitem.info }}</span>
                                <span style="float: right;font-size: 15px;">{{ opts2.parentMenuName }}</span>
                             </el-option>
                           </el-select>
                                </div> 
                                <div class="poprols" :id="value3.length>0?opts3.parentId :''">
                             <el-select v-model="value3" multiple  :placeholder="opts3.parentMenuName" popper-class="seleopt">
                             <el-option
                               v-for="subitem in optArr3"
                               :key="subitem.id"
                               :label="subitem.info"
                               :value="subitem.id">
                                <span style="float: left;font-size: 15px;">{{ subitem.info }}</span>
                                <span style="float: right;font-size: 15px;">{{ opts3.parentMenuName }}</span>
                             </el-option>
                           </el-select>
                                </div>
                                <div class="poprols" :id="value4.length>0?opts4.parentId :''">
                             <el-select v-model="value4" multiple  :placeholder="opts4.parentMenuName" popper-class="seleopt">
                             <el-option
                               v-for="subitem in optArr4"
                               :key="subitem.id"
                               :label="subitem.info"
                               :value="subitem.id">
                                <span style="float: left;font-size: 15px;">{{ subitem.info }}</span>
                                <span style="float: right;font-size: 15px;">{{ opts4.parentMenuName }}</span>
                             </el-option>
                           </el-select>
                              </div>
                           <div class="poprols" :id="value5.length>0?opts5.parentId :''">
                             <el-select v-model="value5" multiple  :placeholder="opts5.parentMenuName" popper-class="seleopt">
                             <el-option
                               v-for="subitem in optArr5"
                               :key="subitem.id"
                               :label="subitem.info"
                               :value="subitem.id">
                                <span style="float: left;font-size: 15px;">{{ subitem.info }}</span>
                                <span style="float: right;font-size: 15px;">{{ opts5.parentMenuName }}</span>
                             </el-option>
                           </el-select>
                              </div>
                              <div class="poprols" :id="value6.length>0?opts6.parentId :''">
                             <el-select v-model="value6" multiple  :placeholder="opts6.parentMenuName" popper-class="seleopt">
                             <el-option
                               v-for="subitem in optArr6"
                               :key="subitem.id"
                               :label="subitem.info"
                               :value="subitem.id">
                                <span style="float: left;font-size: 15px;">{{ subitem.info }}</span>
                                <span style="float: right;font-size: 15px;">{{ opts6.parentMenuName }}</span>
                             </el-option>
                           </el-select>
                              </div>
                             <div class="poprols" :id="value7.length>0?opts7.parentId :''">
                               <el-select v-model="value7" multiple :placeholder="opts7.parentMenuName" popper-class="seleopt">
                             <el-option
                               v-for="subitem in optArr7"
                               :key="subitem.id"
                               :label="subitem.info"
                               :value="subitem.id">
                               <span style="float: left;font-size: 16px;">{{ subitem.info }}</span>
                               <span style="float: right; font-size: 16px;">{{ opts7.parentMenuName }}</span>
                             </el-option>
                             </el-select>
                            </div>  
                             <div class="poprols" :id="value8.length>0?opts8.parentId :''">
                               <el-select v-model="value8" multiple :placeholder="opts8.parentMenuName" popper-class="seleopt">
                                 <el-option
                                   v-for="subitem in optArr8"
                                   :key="subitem.id"
                                   :label="subitem.info"
                                   :value="subitem.id">
                                   <span style="float: left;font-size: 16px;">{{ subitem.info }}</span>
                                   <span style="float: right; font-size: 16px;">{{ opts8.parentMenuName }}</span>
                                 </el-option>
                               </el-select>
                             </div>
                             <div class="poprols" :id="value9.length>0?opts9.parentId :''">
                               <el-select v-model="value9" multiple :placeholder="opts9.parentMenuName" popper-class="seleopt">
                                 <el-option
                                   v-for="subitem in optArr9"
                                   :key="subitem.id"
                                   :label="subitem.info"
                                   :value="subitem.id">
                                   <span style="float: left;font-size: 16px;">{{ subitem.info }}</span>
                                   <span style="float: right; font-size: 16px;">{{ opts9.parentMenuName }}</span>
                                 </el-option>
                               </el-select>
                             </div>
                             <div class="poprols" v-show="value10.length" :id="value10.length>0?opts10.parentId :''">
                               <el-select v-model="value10" multiple :placeholder="opts10.parentMenuName" popper-class="seleopt">
                                 <el-option
                                   v-for="subitem in optArr10"
                                   :key="subitem.id"
                                   :label="subitem.info"
                                   :value="subitem.id">
                                   <span style="float: left;font-size: 16px;">{{ subitem.info }}</span>
                                   <span style="float: right; font-size: 16px;">{{ opts10.parentMenuName }}</span>
                                 </el-option>
                               </el-select>
                             </div>
                           </div> 
       
                   </li>
               </ul>
               
           </div>
       </modal-editfzs>   
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import modalEditfz from '../components/ModalEditfz.vue'
    import modalEditfzs from '../components/ModalEditfzs.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import popoverRoles from '../components/popoverRoles.vue'
    import popoverList from '../components/popoverList.vue'
    import loading from '../components/Loading.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { systemApi, allApi, youxinApi } from '../api/api'
    import { adminzz, adminzzss } from '../validation/validation'
    import { rules } from '../utils/utils'
    import moment from 'moment'


    export default {
        components:{
            loading,
            modalEditfz,
            confirm,
            modalEditfzs,
            popoverRoles,
            popoverList,
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                activeName:"first", //second
                isShow:true,
                loading_save1:false,
                show_modal_user1:false,
                poplistshow:false,
                modifyAccounts:"",
                modifyName:"",
                modifypsw:"",
                modifyRole:"",
                addAccounts:"",
                addName:"",
                addRole:"",
                addpsw:"",
                addRolesName:"",
                rejectReason:"",
                rejectReason1:"",
                modifyRolesName:"",
                iconfont:"el-icon-caret-bottom",
                opt:[],
                opts0:[],
                opts1:[],
                opts2:[],
                opts3:[],
                opts4:[],
                opts5:[],
                opts6:[],
                opts7:[],
                opts8:[],
                opts9:[],
                opts10:[],
                options:[],
                value0:["员工账号管理"],
                value1:[],
                value2:[],
                value3:[],
                value4:[],
                value5:[],
                value6:[],
                value7:[],
                value8:[],
                value9:[],
                value10:[],
                show_modal_user2:false,
                loading_save2:false,
                show_modal_user3:false,
                loading_save3:false,
                show_modal_user4:false,
                loading_save4:false,
                popshow:false,
                total:10,
                tableData: [],
                  txtss:"",
                  indexs:"",
                  arrs:"",
                  itemChe:false,
                  msg:[],
                  adminRecords:[],
                  adminIsShow:false,
                  adminTotal:0,
                  adminpageIndex:1,
                  value5:"",
                  allRolesArr:[],
                  adminId:null,
                  rolesListPageIndex:1,
                  rolesListPages:0,
                  tableData1:[],
                  isRoleList:false,
                  msgsd:[],
                  rolesListindex:1,
                  rolesId:"",
                  reserveArr:[],
                  sonStatusArr:[],
                  optArr0:[],
                  optArr1:[],
                  optArr2:[],
                  optArr3:[],
                  optArr4:[],
                  optArr5:[],
                  optArr6:[],
                  optArr7:[],
                  optArr7:[],
                  optArr8:[],
                  optArr9:[],
                  optArr10:[],

            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setMenuList'
            ]),

            /**
             * [allRolesGn description]
             * @Author   lzh
             * @DateTime 2018-06-29T18:14:33+0800
             * @return   {[type]}                 [description]
             */
            allRolesGn(){
                systemApi.allRoles()
                .then(result=>{
                   // console.log(result)
                    this.allRolesArr=result.page.list;
                })
                .catch(error => {
                    
                })
            },
            /**
             * [administratorInitList description]
             * @Author   lzh
             * @DateTime 2018-06-29T16:55:34+0800
             * @return   {[type]}                 [description]
             */
            administratorInitList(){
              this.adminIsShow=true;
              let msg={
                pageIndex:this.adminpageIndex
              }
                systemApi.operatorList(msg)
                .then(result=>{
                   this.adminIsShow=false;
                   this.adminTotal=result.totalCount
                   this.adminRecords=result.records;
                   for(var i = 0;i<this.adminRecords.length;i++){
                    this.adminRecords[i].role="";
                     for(var j = 0;j<this.adminRecords[i].roles.length;j++){
                        this.adminRecords[i].role+=this.adminRecords[i].roles[j].roleName+","
                     }
                   }
                   
                   for(var l = 0;l<this.adminRecords.length;l++){
          this.adminRecords[l].role = this.adminRecords[l].role.split(",").slice(0,(this.adminRecords[l].role.split(",").length-1)).join()
                   }
                   this.tableData=this.adminRecords
                   //console.log(this.tableData)
                })
                .catch(error => {
                    console.error(error)
                    this.adminIsShow=false;
                })
              
            },
            resetAdmin(){
                this.show_modal_user1=true
                this.addAccounts=""
                this.addName=""
                this.addpsw=""
                this.value5=[]
            },
            /*
              清空新增管理员弹窗的数据
             */
            clearAdd(){
              this.addAccounts="";
              this.addName="";
              this.addpsw="";
              this.addRole="";
            },
            arfn(){
              this.show_modal_user3=true;
              this.clearAddRoles(1);
            },
            clearAddRoles(item){
              if(item>0){
                this.addRolesName="";
                this.rejectReason=""
              }else{
                this.modifyRolesName="";
                this.rejectReason1=""
              }
              this.value0=[]
              this.value1=[]
              this.value2=[]
              this.value3=[]
              this.value4=[]
              this.value5=[]
              this.value6=[]
              this.value7=[]
              this.value8=[]
              this.value9=[]
              this.value10=[]
            },
            /*
              清空修改管理员弹窗的数据
             */
            clearModify(){
              this.modifyAccounts="";
              this.modifyName="";
              this.modifypsw="";
              this.modifyRole="";
            },
            /*新增管理员modal 保存 addAccounts*/
            saveUser1(){
              let string="",arr=[];
                for(var k = 0;k<this.allRolesArr.length;k++){
                 if(this.value5.indexOf(this.allRolesArr[k].id)!=-1){
                    arr.push(this.allRolesArr[k].id)
                 }
                }
                this.addRole=arr.join(",")
              let msg={
                  accName:this.addAccounts,
                  name:this.addName,
                  accpwd:this.addpsw,
                  roleCode:this.addRole,
                }

              if(!adminzz(msg)) return
                this.show_modal_user1=false;
                systemApi.saveOperator(msg)
                .then(result=>{
                    
                    this.administratorInitList();
                    this.value5=[];
                    this.clearAdd();
                })
                .catch(error => {
                    
                })
            },
            /**
             * [rolelistfn description]
             * @Author   lzh
             * @DateTime 2018-07-02T10:41:19+0800
             * @return   {[type]}                 [角色列表]
             */
            rolelistfn(){
              let msg = {
                pageIndex:this.rolesListPageIndex
              }
              this.isRoleList=true;
                systemApi.roleList(msg)
                .then(result=>{
                  //console.log(result)
                  //page-count
                    this.rolesListPages=result.page.totalRow
                    this.tableData1=result.page.list
                    this.rolesListindex=result.page.totalPage
                    this.isRoleList=false;
                })
                .catch(error => {
                     this.isRoleList=false;
                })
            },

            /*新增角色modal 显示*/
            addroles(){
                this.show_modal_user3=true;
            },
            /*
            *   分页器跳转函数
            *  @params val 跳转页数
            */
             handleCurrentChange(val){
                console.log(`当前页: ${val}`);
                this.adminpageIndex=val;
                this.administratorInitList()
            },
            /*
            *   分页器跳转函数 角色管理
            *  @params val 跳转页数
            */
             handleCurrentChange1(val){
                console.log(`当前页: ${val}`);
                this.rolesListPageIndex=val; 
                this.rolelistfn() 
            },
            /*
            *点击tab 函数
            */
            handleClick(tab, event){
                console.log(tab, event);
            },
            
            systemMenuListFn(){
                 systemApi.systemMenuList()
                .then(result=>{
                    this.opt=result
                    console.log(this.opt)
                    this.opts0=this.opt[0]
                    this.opts1=this.opt[1]
                    this.opts2=this.opt[2]
                    this.opts3=this.opt[3]
                    this.opts4=this.opt[4]
                    this.opts5=this.opt[5]
                    this.opts6=this.opt[6]
                    this.opts7=this.opt[7]
                    this.opts8=this.opt[8]
                    this.opts9=this.opt[9]
                    if(this.opt[10]){
                      this.opts10=this.opt[10]
                      this.optArr10=this.opts10.sonMenuVOList
                    }
                    this.optArr0=this.opts0.sonMenuVOList
                    this.optArr2=this.opts2.sonMenuVOList
                    this.optArr3=this.opts3.sonMenuVOList
                    this.optArr4=this.opts4.sonMenuVOList
                    this.optArr5=this.opts5.sonMenuVOList
                    this.optArr6=this.opts6.sonMenuVOList
                    this.optArr7=this.opts7.sonMenuVOList
                    this.optArr8=this.opts8.sonMenuVOList
                    this.optArr9=this.opts9.sonMenuVOList
                    this.optArr1=this.opts1.sonMenuVOList
                })
                .catch(error => {
                })
            },
            /*
            *deleteRow 每条数据的删除函数
            *  index 为当前的数据的下标
            *  rows为当前的数据变量   
            */
            deleteRow(index, rows){
                this.$confirm('此操作将删除该管理员账号, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    //done
                    let msg = {
                        id:index.id,
                     }
                     systemApi.systemDeleteOperator(msg)
                    .then(result=>{
                        this.administratorInitList();
                    })
                    .catch(error => {
                        console.log(error)
                    })
                }).catch(() => {
                    //done   
                });
            },
            /*
            *deleteRow1 每条数据的删除函数
            *  index 为当前的数据的下标
            *  rows为当前的数据变量   
            */
            deleteRow1(index, rows){
                this.$confirm('此操作将删除该角色, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                    //done
                     let msg = {
                        id:index.id,
                     }
                     systemApi.systemDeleteRoles(msg)
                    .then(result=>{
                        //this.rolesListPageIndex=this.rolesListPageIndex-1
                        this.rolelistfn();
                    })
                    .catch(error => {
                        console.log(error)
                    })
                }).catch(() => {
                    //done   
                });
            },
             modifyFn1(res){
              this.rolesId=res.id
              this.show_modal_user4=true
                //console.log(res)
                this.reserveModifyFn(res)
                this.reserveAjax();
            },
            reserveModifyFn(res){
                this.modifyRolesName=res.roleName
                this.rejectReason1=res.remarks
            },
            reserveAjax(){
              let msg = {
                id:this.rolesId,
              }
              systemApi.systemUpdMenuList(msg)
                    .then(result=>{
                      console.log(result)
                        this.reserveArr=result;
                        for(var i = 0;i<this.reserveArr.length;i++){
                            let index=[]
                              this.reserveArr[i].modal=[]
                            for(var j = 0;j<this.reserveArr[i].sonMenuVOList.length;j++){
                              
                                if(this.reserveArr[i].sonMenuVOList[j].sonStatus==1){
                                    index.push(this.reserveArr[i].sonMenuVOList[j].id)
                                    this.reserveArr[i].modal=index
                                }
                            }
                        }
                        console.log(this.reserveArr)
                        this.opts0=this.reserveArr[0]
                        this.value0=this.opts0.modal;

                        this.opts1=this.reserveArr[1]
                        this.value1=this.opts1.modal;

                        this.opts2=this.reserveArr[2]
                        this.value2=this.opts2.modal;

                        this.opts3=this.reserveArr[3]
                        this.value3=this.opts3.modal;

                        this.opts4=this.reserveArr[4]
                        this.value4=this.opts4.modal;

                        this.opts5=this.reserveArr[5]
                        this.value5=this.opts5.modal;

                        this.opts6=this.reserveArr[6]
                        this.value6=this.opts6.modal;

                        this.opts7=this.reserveArr[7]
                        this.value7=this.opts7.modal;

                        this.opts8=this.reserveArr[8]
                        this.value8=this.opts8.modal;

                        this.opts9=this.reserveArr[9]
                        this.value9=this.opts9.modal;

                        if(this.reserveArr[10]){
                          this.opts10=this.reserveArr[10]
                          this.value10=this.opts10.modal;
                        }

                    })
                    .catch(error => {
                        console.log(error)
                    })
                
            },
            reserveAdmin(res){
                this.modifyAccounts=res.accName
                this.modifyName=res.name
                this.value5=[]
                for(var i = 0; i<res.roles.length;i++){
                   this.value5.push(Number(res.roles[i].id)) 
                }
            },
            modifyFn(res){
              this.adminId=res.id
              this.show_modal_user2=true
              //console.log(res)
              this.reserveAdmin(res)
            },
            /*
            *    修改管理员
            *   @params
            *    modifyAccounts 账号
            *    modifyName     姓名
            *    modifypsw      密码
            *    modifyRole      角色
            */
            saveUser2(){
              let string="",arr=[];
             
                for(var k = 0;k<this.allRolesArr.length;k++){
                 if(this.value5.indexOf(this.allRolesArr[k].id)!=-1){
                    arr.push(this.allRolesArr[k].id)
                 }
                }
                this.modifyRole=arr.join(",")
                
              let msg={
                  id:this.adminId,
                  accpwd:this.modifypsw,
                  accName:this.modifyAccounts,
                  name:this.modifyName,
                  roleCode:this.modifyRole,
                }
               if(!adminzz(msg)) return
                 this.show_modal_user2=false;
               // console.log(this.modifyRole)
                systemApi.saveOperator(msg)
                .then(result=>{
                   
                   this.administratorInitList();
                   this.clearModify();
                   this.value5=[];
                })
                .catch(error => {
                    
                })
            },
            clearValue(){
              this.value0=""
              this.value1=""
              this.value2=""
              this.value3=""
              this.value4=""
              this.value5=""
              this.value6=""
              this.value7=""
              this.value8=""
              this.value9=""
              this.value10=""
            },
            /*
            *新增角色
            *   
            *   addRolesName         姓名
            */
            addRolesFn(){
                let msg=[];
                msg.push(this.value0,this.value1,this.value2,this.value3,this.value4,this.value5,this.value6,this.value7,this.value8,this.value9,this.value10)
                msg=(this.flatten(msg)).join(",")
                //console.log(typeof msg)
                let arr=[],poprols=$(".poprols");
                for(var i = 0;i<$(".poprols").length;i++){
                  //console.log($(".poprols")[i].id)
                    if($(".poprols")[i].id!=""){
                      arr.push($(".poprols")[i].id)
                    }
                }

                var arr1=this.unique(arr).join(",");
                //console.log(arr1)
               // console.log(msg)
                let msgdata = {
                  roleName:this.addRolesName,
                  remarks:this.rejectReason,
                  parentMenuId:arr1,
                  sonMenuId:msg
                }
                if(!adminzzss(msgdata)) return
                  this.show_modal_user3=false;
                systemApi.systemSaveRoles(msgdata)
                .then(result=>{
                  
                  this.rolelistfn()
                  this.clearValue();
                })
                .catch(error => {
                    
                })
                
            },
            unique(arr){

            　　var res = [arr[0]];

            　　for(var i=1;i<arr.length;i++){

            　　　　var repeat = false;

            　　　　for(var j=0;j<res.length;j++){

            　　　　　　if(arr[i] == res[j]){

            　　　　　　　　repeat = true;

            　　　　　　　　break;

            　　　　　　}

            　　　　}

            　　　　if(!repeat){

            　　　　　　res.push(arr[i]);

            　　　　}

            　　}

            　　return res;

            },
            flatten(arr){
                var res = [];
                for(var i = 0; i < arr.length; i++) {
                    if(Array.isArray(arr[i])) {
                        res = res.concat(this.flatten(arr[i]));
                    } else {
                        res.push(arr[i]);
                    }
                }
                return res;
            },
                /*
            *修改角色
            *   
            *   modifyRolesName         姓名
            */
            addRolesFn1(){
                
                let msg=[];
                msg.push(this.value0,this.value1,this.value2,this.value3,this.value4,this.value5,this.value6,this.value7,this.value8,this.value9,this.value10)
                msg=(this.flatten(msg)).join(",")
                let arr=[],poprols=$(".poprols");
                for(var i = 0;i<$(".poprols").length;i++){
                    if($(".poprols")[i].id!=""){
                      arr.push($(".poprols")[i].id)
                    }
                }
                var arr1=this.unique(arr).join(",");
                //console.log(arr1)
                let msgdata = {
                  id:this.rolesId,
                  roleName:this.modifyRolesName,
                  remarks:this.rejectReason1,
                  parentMenuId:arr1,
                  sonMenuId:msg
                }
                if(!adminzzss(msgdata)) return
                this.show_modal_user4=false;
                systemApi.systemSaveRoles(msgdata)
                .then(result=>{
                  this.rolelistfn();
                  this.clearValue();
                })
                .catch(error => {
                    
                })
            },
            emitClose(){
              //this.popshow=false;
            },
            isClick(){
              this.popshow=!this.popshow
              if(this.iconfont=="el-icon-caret-bottom"){
                    this.iconfont="el-icon-caret-top"
              }else{
                this.iconfont="el-icon-caret-bottom"
              }
              
              this.staArr=this.staArr;
            },
        },
        created(){
          this.administratorInitList();
          this.allRolesGn();
          this.rolelistfn();
          this.systemMenuListFn();
        },
        updated(){
          var _this=this;
          let indexdd=_this.indexs
          //console.log(_this.popshow)
          if(_this.popshow){
               var oBtn=document.getElementById("ppclass");
              document.onclick=function(event){
               
                 var e=event || window.event;//兼容ie和非ie的event
                 var aim=e.srcElement || e.target; //兼容ie和非ie的事件源
                 //
                 if(e.srcElement){
                  var aim=e.srcElement;
                   if(aim!=oBtn){
                      _this.emitClose()
                   }
                 }else{
                   var aim=e.target;
                   if(aim!=oBtn){
                      _this.emitClose()
                   }
                 }
              }   
          }else{
              var oBtn=document.getElementById("ppclass");
              document.onclick=function(event){
               
                 var e=event || window.event;//兼容ie和非ie的event
                 var aim=e.srcElement || e.target; //兼容ie和非ie的事件源
                 //
                 if(e.srcElement){
                  var aim=e.srcElement;
                   if(aim==oBtn){
                      _this.emitClose()
                   }
                 }else{
                   var aim=e.target;
                   if(aim==oBtn){
                      _this.emitClose()
                   }
                 }
              }   
          }
        },
    }
</script>
<style>
.ssb{
    height:207px;
    }
    #system-user  .list2 .el-select{
        width: 194px;
    }
    /* #system-user .list1 .el-select__tags{
          position: absolute;
          top: 50%;
        } */
      #system-user .list2 .el-input__inner{
          font-size: 16px;
        }
</style>
<style lang="scss" scoped>
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .popsss{
      height:400px;
    }
    .adminplist
    {
      height:616px;
    }
    .el-select-dropdown .el-select-dropdown__item.selected::after{
        content:"";
        font-size: 14px;
    }
    .sjk{
      overflow-y:scroll;
      height:250px;
      margin-top:10px;
      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
      //border:1px solid #efefef;
    }
    .poprols{
        float: left;
        width: 236px;
        margin-top:4px;
        .el-select{
            float: left;
            width: 200px;
            margin-left:3px;
        }
    }
    .inpw {
        font-size: 16px;
    }
    .el-icon-caret-top,.el-icon-caret-bottom{
        font-size: 20px;
    }
    .back{
        background:#FAFAFA;
    }
    .btn .el-button{
        padding:0;
        width:134px;
        height:49px;
        font-size: 18px;
    }
    .btn{
        width:100%;
        height:49px;
        margin:30px 0 20px 70px;
    }
    #system-user{
        padding: 85px 40px 0 40px;
        .el-select{
            margin-left: 10px;
        }
        .list2 .el-select{
          margin-left: 0;
          //width:200px;
          
        }

    }
    .red{
        color:#4966F0;
    }
    .modify{
        width: 100%;
        height:100%;
    }
    .modal_nav li{
        min-height:50px;
        //height:50px;
        margin-top:20px;
        margin-left: 34px;
    }
    .modal_nav li:nth-child(4){
        margin-bottom:55px;
    }
    .modal_nav .list{
        min-height:50px;
        height:108px;
        margin-top:20px;
    }
    .modal_nav .list1{
        width:500px;
        height: 286px;
    }
    .form-item__key2{
        float:left;
        width:115px;
        height:45px;
        line-height: 45px;
    }
    .inpw{
        //margin-left:10px;
        width:194px;
        height:44px;
    }
      .form-item__key,.form-item_inp{
        float:left;
    }
    .modal-add-account__main{
        margin-left:44px;
        font-size: 20px;
    }
    .modal-add-account__main1{
        font-size: 20px;
    }
    .paga{
         margin-top:20px;
    }
    .txta{
        width:324px;
        //border:1px solid #dcdfe6;
    }
    #ppclass{
        margin-left:58px;
        padding-left: 20px;
    }
    .popspan{
        font-size: 16px;   
        float: left;
        margin-left:20px;
        width:126px;
        height:30px;
        line-height: 32px;
        //border: 1px solid #595CF4;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
    }
    .active{
        color:#FFFFFF;
        background: #595CF4;
    }
    .noactive{
        color:rgba(89,92,244,1);
    }
    .pldiv{
        color:#999999;
        font-size: 16px;
        height:36px;
        line-height: 36px;
    }
    .actives{
        color:#595CF4;
    }
    .noactives{
        color:#999999;
    }
</style>
